<template>
    <!-- 出库负责人弹窗 -->
    <div class="dialog-box">
        <el-dialog v-model="dialogVisible" title="选择负责人" width="800">
            <div class="dialog-content">
                <!-- 分组区域保持不变 -->
                <div class="row-1">
                    <div class="row-1-title">
                        <div>组织架构</div>
                        <div style="cursor: pointer">
                            <el-icon>
                                <Search />
                            </el-icon>
                        </div>
                    </div>
                    <!-- 左侧组织架构树形列表 -->
                    <div class="row-1-content">
                        <el-tree style="max-width: 600px" :data="TreeData"  :props="defaultProps" highlight-current="true" 
                            @node-click="handleNodeClick" />
                    </div>
                </div>

                <!-- 右侧产品列表 -->
                <div class="row-2">
                    <div class="table-container">
                        <el-table ref="leftTableRef" :data="tableData" style="width: 100%" border
                            :row-key="(row: User) => row.id">
                            <el-table-column width="55">
                                <template #default="scope">
                                    <el-radio v-model="selectedRowId" :label="scope.row.id"
                                        @change="handleRadioChange(scope.row)" />
                                </template>
                            </el-table-column>
                            <el-table-column label="姓名" property="name" width="auto">
                            </el-table-column>
                            <el-table-column property="num" label="编号" width="auto" />
                            <el-table-column property="mobile" label="联系电话" show-overflow-tooltip width="auto" />
                        </el-table>
                    </div>
                </div>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button color="#626aef" @click="submit">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import api from "@/api";
import { ref, defineEmits, watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import type { ElTable } from "element-plus";
const flags = ref<number>();
// 
interface User {
    name: string;
    num: string;
    Sphone: string;
    mobile: string;
    id: number;
}
// 
interface Tree {
    id: number;
    label: string;
    children?: Tree[];
}

const handleNodeClick = (data: Tree) => {
    console.log(data);
    orgId.value = data.id;
};

const TreeData = ref<Tree[]>([
]);
const defaultProps = {
    children: 'children',
    label: 'name'
}
// 获取组织架构树形列表
const getOrgTree = async () => {
    const res = await api.publicFun.getOrgList({});
    if (res.code === 200) {
        TreeData.value = res.data;
    }
};


const tableData = ref<User[]>([
]);
const orgId = ref<number>();
// 获取组织人员
const getOrgList = async () => {
    const res = await api.publicFun.getPurchasingDirectorList({
        // 为当前选择的架构id
        org_id: orgId.value
    });
    if (res.code === 200) {
        tableData.value = res.data;
    }
};

watch(orgId, () => {
    getOrgList();
});

const selectedRowId = ref<Number>();
const selectedRow = ref<User>();

const handleRadioChange = (row: User) => {
    selectedRow.value = row;
    console.log("选中行:", row);
};
// 打开弹窗
const dialogVisible = ref<boolean>(false);
const openLoading = (flag: number = 0) => {
    dialogVisible.value = true;
    flags.value = flag;

    getOrgList();
    getOrgTree();
};
const submit = () => {
    if (selectedRow.value) {
        console.log("提交选中的负责人:", selectedRow.value);
        emit("selectPurchasingDirector", selectedRow.value);
        dialogVisible.value = false;
    } else {
        // 没有选择负责人
        console.warn("请先选择一个负责人");
    }
};

const emit = defineEmits(["selectPurchasingDirector"]);

defineExpose(
    { openLoading }
);
</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    height: 400px;
    flex-direction: row;
    gap: 10px;

    .row-1 {
        flex: 1;
        border: 1px solid #f0f0f0;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .row-1-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            width: 76%;
            border-bottom: 1px solid #f0f0f0;
            margin: 0 auto;
            color: #172b4d;
            flex-shrink: 0;
        }

        .row-1-content {
            flex: 1;
            padding: 10px;
            margin: 0 10px;
            overflow-y: auto;
            overflow-x: hidden;
            max-height: calc(400px - 60px);

            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                background: #ddd;
                
                &:hover {
                    background: #999;
                }
            }

            &::-webkit-scrollbar-track {
                border-radius: 3px;
                background: #f5f5f5;
            }

            :deep(.el-tree) {
                background: transparent;
                
                .el-tree-node {
                    .el-tree-node__content {
                        height: 36px;
                        padding: 0 8px;
                        
                        &:hover {
                            background-color: #f5f7fa;
                        }
                    }
                    
                    .el-tree-node__expand-icon {
                        padding: 6px;
                        font-size: 12px;
                        
                        &.is-leaf {
                            color: transparent;
                            cursor: default;
                        }
                    }
                }
            }
        }
    }

    .row-2 {
        flex: 2;
        border: 1px solid #f0f0f0;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .row-2-search {
            padding: 10px;
            width: 50%;
        }

        .table-container {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;

            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 3px;
                background: #ddd;
                
                &:hover {
                    background: #999;
                }
            }

            &::-webkit-scrollbar-track {
                border-radius: 3px;
                background: #f5f5f5;
            }

            .el-table {
                height: 100%;
            }
        }
    }
}

::v-deep .el-dialog {
    --el-dialog-padding-primary: 0px;
    
    .el-dialog__body {
        padding: 20px 10px;
        overflow: hidden;
    }
}

::v-deep .el-dialog__header {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}

::v-deep .dialog-footer {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #000;
}

:deep(.cell) {
    white-space: nowrap;
    text-overflow: ellipsis;
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #6860ff;
    border-color: #6860ff;
}

:deep(.el-checkbox__inner:hover) {
    border-color: #626aef !important;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background-color: #6860ff;
}

:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    border-color: #6860ff;
}

:deep(.el-radio__label) {
    display: none;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #6860ff;
    color: #6860ff;
}

:deep(.el-radio) {
    border-color: none;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: #edecff;
}

:deep(.el-tree-node__content) {
    height: 36px;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
    background-color: #edecff;
    color: #6860ff;
}

:deep(.el-radio__inner:hover) {
    border-color: #626aef;
}
</style>